<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高阶函数实现三个需求</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <button @click="someThing">高阶函数实现需求</button>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello world !",
    },
    methods: {

      someThing:function (){

        let numbers = [10,20,30,40,50,60,70,80]
        /*
        需求1
          求出大于五十的数字
        需求2
          大于50的数字乘2
        需求3
          需求2的结果总和
        */

        /*-----------------------使用高阶函数-----------------------------------------------------*/

        /*

        1.filter方法
        参数是一个回调函数 每次循环数组中的元素 都会将当前元素作为参数传入这个方法
        当方法返回true时 将此次的循环的元素添加到新数组中
        */
        let result = numbers.filter(function (number){
          return number > 50
        });

        /*
        2. map方法
        map方法需要一个回调函数作为参数 每次循环都会将当前元素作为参数传递给回调函数
        然后将返回的值添加到新数组中
        */
        let result2 = result.map(function (number){
          return number * 2;
        });

        /*
        * 3.reduce方法：对数组中所有内容进行汇总
        *  参数1：回调函数 这个函数有两个参数 参数1是上一次循环此方法返回的值 参数2是当前循环的元素
        *  参数2: 第一次调用时 回调函数的第一个参数的默认值
        *   return preValue + value; 作用： 将数组中的全部值相加 返回一个数字
        * */
        let total = result2.reduce(function (preValue,value){
          return preValue + value;
        },0);
        alert('高阶函数做法' + total);

        /*
        * 4.组合写法
        * */
        let total1 = numbers.filter(function (number){
          return number > 50
        }).map(function (number){
          return number * 2
        }).reduce(function (preValue,value){
          return preValue + value;
        },0)
        alert('组合高阶函数结果' + total1)

        /*高级组合写法*/
        let total2 = numbers.filter( n => n > 50).map(n => n * 2).reduce((preValue,value) => preValue + value);
        alert('高级组合高阶函数结果' + total2)
      }
    }
  })

</script>


</body>
</html>